<template>
  <ul>
    <li>
      <select @click="changeOption">
        选项
        <option value="simpel">单选</option>
        <option value="multi">多选</option>
      </select>
    </li>
    <li class="table">
      <template v-if="select == 'multi'">
        <div class="tableData">全选</div>
        <input class="tableData" type="checkbox" @click="checkAll" />
        <div class="tableData">反选</div>
        <input class="tableData" type="checkbox" @click="reverseCheck"/>
      </template>

      <div class="tableData">文章id</div>
      <div class="tableData">文章标题</div>
      <div class="tableData">文章内容</div>
      <div class="tableData">操作</div>
    </li>
    <li v-for="(item, index) in tableData" :key="index" class="table">
      <input
        class="tableData"
        type="checkbox"
        v-model="selected"
        @click="checkRadio"
        :value="item.article_id"
      />
      <div class="tableData">{{ item.article_id }}</div>
      <div class="tableData">{{ item.article_title }}</div>
      <div class="tableData">{{ item.article_content }}</div>
      <button class="tableData" @click="del(item.article_id)">删除</button>
    </li>
  </ul>
  <ul class="pagination">
    <li><button @click="up">上一页</button></li>
    <li
      v-for="(item, index) in NumberOfPages()"
      :key="index"
      @click="getList(item)"
      :class="+currentPage === item ? 'active' : ''"
    >
      {{ item }}
    </li>
    <li><button @click="down">下一页</button></li>
    <button @click="mulDel">批量删除</button>
  </ul>
  <ModelCom
    :isShow="isShow"
    @cancel="cancel"
    @confirm="confirm"
    title="提示"
    content="是否确认删除？"
  />
</template>
<script setup>
import { articleQuery, delArticle } from "../api/index";
import ModelCom from "../components/ModelCom.vue";
import { ref } from "vue";
let tableData = ref([]); //表格数据
let total = ref(""); //总条数
const pageSize = "10"; //文章条数
let currentPage = ref(1); //当前页
const isShow = ref(false); //是否显示弹窗
const Id = ref(null); //文章id
let selected = ref([]); //选中的数组
let select = ref("simpel"); //默认为单选

//查询文章信息
const getList = (pageNo) => {
  articleQuery({
    pageNo,
    pageSize,
  }).then((res) => {
    console.log(res);
    // tableData.value = res?.data?.list || [];
    const { list = [] } = res?.data || {};
    tableData.value = list;
    total.value = res?.data?.total || 0;
    currentPage.value = pageNo;
  });
};

//点击上一页
const up = () => {
  currentPage.value = currentPage.value - 1 >= 1 ? currentPage.value - 1 : 1;
  getList(currentPage.value);
};

//点击下一页
const down = () => {
  currentPage.value =
    currentPage.value + 1 <= NumberOfPages()
      ? currentPage.value + 1
      : NumberOfPages();
  getList(currentPage.value);
};

getList(currentPage.value);

//总页数
const NumberOfPages = () => {
  return Math.ceil(total.value / pageSize);
};

//删除文章信息
const del = (articleIds) => {
  isShow.value = true;
  Id.value = articleIds;
};

//取消删除
const cancel = () => {
  isShow.value = false;
};

//确定删除
const confirm = () => {
  isShow.value = false;
  delArticle({
    articleIds: Id.value.toString(),
  }).then((res) => {
    console.log(res);
    getList(currentPage.value);
  });
};

//切换按钮(用途：用来确认用户选的单选还是多选 思路：根据option自带的value属性值确认,首先根据e.target.value获取到用户选中的选项，其次声明一个选项变量用于接收用户点击后的选项)
const changeOption = (e) => {
  const { value } = e.target;
  select.value = value;
  //当多选选中好几个切换为单选应该把选中的状态清空
  if(select.value == "simpel"){
    selected.value = [];
  }
};

// 单选 (思路：需要获取到用户点击的点击态和点击的值，这里可以自己定义绑定什么，建议绑定id唯一性，因为点击的值是会有变化的所以这里绑定的value是动态的，
// 这两个值都是通过点击事件e来获取,通过v-model双向绑定事件绑定的selected来做处理，只要选项为单选的时候，就将selected数组清空，如果checked值为true，那么就将选中的value值赋值给selected数组即可
// 因为这个获取到的value是字符串类型，所以要用数组包裹起来)
const checkRadio = (e) => {
  const { checked, value } = e.target;
  if (select.value == "simpel") {
    if (checked) {
      selected.value = [value];
    }else{
      selected.value = [];
    }
  }
  console.log(selected.value);
};

//全选(思路：根据全选选项框是否选中的状态值来判断是否全选，如果是选中状态,遍历列表获取到当前页所有的id,把当前页所有的id push进选中的数组，不是选中状态，就把selected数组清空)
const checkAll = (e) => {
  const { checked } = e.target;
  if (checked) {
    tableData.value.forEach((element) => {
      selected.value.push(element.article_id);
    });
  } else {
    selected.value = [];
  }
};

//反选（思路：声明一个新数组，遍历整个列表，通过双向绑定selected可以得到已选中的数组，利用includes()方法判断列表id是否包含在已选中的数组selected内，返回一个布尔值，
//当这个为fasle的时候，就将未选中的值push进新数组，再将新数组赋值给已选中的数组
const reverseCheck  = () =>{
  const arr = [] ;
 tableData.value.forEach((element) => {
    // const flag =  selected.value.includes(element.article_id);
    // if(!flag) {
    //   arr.push(element.article_id)
    // }
   const flag =  selected.value.indexOf(element.article_id)
    if(flag == -1){
       arr.push(element.article_id)
    }
    });
      selected.value = arr
}

//批量删除(思路：将数组选中的id通过join数组方法转化为字符串，判断selected数组是否有值，有的话调用删除接口进行删除)
const mulDel = () =>{
 Id.value =  selected.value.join()
 if(selected.value.length){
   delArticle({
    articleIds: Id.value,
  }).then((res) => {
    console.log(res);
    getList(currentPage.value);
  });
 }
}

//问题 反选和全选可以同时操作  选中的selected值不对
</script>

<style scoped>
.table {
  display: flex;
  height: 100%;
}

li {
  list-style: none;
  margin: 10px;
}

.tableData {
  flex: 1;
}

.pagination {
  display: flex;
  justify-content: center;
}

.active {
  background-color: aqua;
}
</style>
